<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form divClass" v-if="headerShow">
        <div>
          <a-form
            size="small"
            ref="searchFormRef"
            :model="searchForm"
            layout="inline"
            label-align="right"
            :rules="searchFormRules"
          >
            <a-form-item label="公司" field="firmId">
              <a-cascader
                v-model="searchForm.firmId"
                :options="searchForm.firmOptions"
                allow-clear
                class="bacClass"
                :style="{ width: '220px' }"
                popup-container="html"
              />
            </a-form-item>
            <a-form-item label="织布单号">
              <a-input
                allow-clear
                :style="{ width: '200px' }"
                class="bacClass"
                placeholder=""
                v-model="searchForm.planOrderCode"
                @press-enter="doRefresh"
              />
            </a-form-item>
            <a-form-item label="生产单号">
              <a-input
                allow-clear
                :style="{ width: '200px' }"
                class="bacClass"
                placeholder=""
                v-model="searchForm.weavingCode"
                @press-enter="doRefresh"
              />
            </a-form-item>
            <a-form-item label="机台号">
              <a-input
                allow-clear
                :style="{ width: '200px' }"
                class="bacClass"
                placeholder=""
                v-model="searchForm.machineCode"
                @press-enter="doRefresh"
              />
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar">
        <el-button type="primary" :icon="Search" @click="selectHandler" style="margin-right: 20px"
          >查询</el-button
        >
      </div>
    </template>
    <template #pageTabel>
      <a-spin :loading="onLoading" tip="加载中" dot style="height: 100%; width: 100%; z-index: 999">
        <div style="width: 100%; height: 48%">
          <encapsulation-agrid
            ref="table1Ref"
            :configaggrid="configaggrid"
            @rowClickRequest="getStepsData"
          ></encapsulation-agrid>
        </div>
        <a-divider />
        <div class="step-container">
          <div class="step-box1">
            <a-steps type="dot" :current="currentStep1">
              <a-popover title="" position="bottom">
                <a-step class="green-step"> 领料需求单 </a-step>
                <template #content>
                  <p>领料人：{{ step1Info.needPerson?step1Info.needPerson:null }}</p>
                  <p>领料时间：{{ step1Info.needTime?step1Info.needTime:null }}</p>
                  <p>领料重量：{{ step1Info.needWeight?step1Info.needWeight:null }}</p>
                </template>
              </a-popover>
              <a-popover title="" position="bottom">
                <a-step class="green-step">领料单</a-step>
                <template #content>
                  <p>创建人：{{ step1Info.materialPerson?step1Info.materialPerson:null }}</p>
                  <p>创建时间：{{ step1Info.materialTime?step1Info.materialTime:null }}</p>
                  <p>领料重量：{{ step1Info.materialWeight?step1Info.materialWeight:null }}</p>
                </template>
              </a-popover>
              <a-popover title="" position="bottom">
                <a-step class="green-step">原纱出库</a-step>
                <template #content>
                  <p>出库人员：{{ step1Info.rawOutPerson?step1Info.rawOutPerson:null }}</p>
                  <p>出库时间：{{ step1Info.rawOutTime?step1Info.rawOutTime:null }}</p>
                  <p>出库重量：{{ step1Info.rawOutWeight?step1Info.rawOutWeight:null }}</p>
                </template>
              </a-popover>
              <a-popover title="" position="bottom">
                <a-step class="green-step">拆纱</a-step>
                <template #content>
                  <p>创建人：{{ step1Info.disassemblePerson?step1Info.disassemblePerson:null }}</p>
                  <p>创建时间：{{ step1Info.disassembleTime?step1Info.disassembleTime:null }}</p>
                  <p>拆纱数量：{{ step1Info.disassembleWeight?step1Info.disassembleWeight:null }}</p>
                </template>
              </a-popover>
              <a-popover title="" position="bottom">
                <a-step class="blue-step">值机派工</a-step>
                <template #content>
                  <p>派工人员：{{ step1Info.dutCreateName?step1Info.dutCreateName:null }}</p>
                  <p>值机人员：{{ step1Info.dutPerson?step1Info.dutPerson:null }}</p>
                  <p>值机时间：{{ step1Info.dutTime?step1Info.dutTime:null }}</p>
                </template>
              </a-popover>
              <a-popover title="" position="bottom">
                <a-step class="blue-step">落布</a-step>
                <template #content>
                  <p>落布人员：{{ step1Info.clothScanPerson?step1Info.clothScanPerson:null }}</p>
                  <p>落布时间：{{ step1Info.clothScanTime?step1Info.clothScanTime:null }}</p>
                </template>
              </a-popover>
              <a-popover title="" position="bottom">
                <a-step class="blue-step">验布</a-step>
                <template #content>
                  <p>验布人员：{{ step1Info.sgcPerson?step1Info.sgcPerson:null }}</p>
                  <p>验布时间：{{ step1Info.sgcTime?step1Info.sgcTime:null }}</p>
                </template>
              </a-popover>
              <a-popover title="" position="bottom">
                <a-step class="blue-step">入库</a-step>
                <template #content>
                  <p>入库人员：{{ step1Info.greyInPerson?step1Info.greyInPerson:null }}</p>
                  <p>入库时间：{{ step1Info.greyInTime?step1Info.greyInTime:null }}</p>
                  <p>入库重量：{{ step1Info.greyInWeight?step1Info.greyInWeight:null }}</p>
                </template>
              </a-popover>
              <a-popover title="" position="bottom">
                <a-step class="blue-step">出库</a-step>
                <template #content>
                  <p>出库人员：{{ step1Info.greyOutPerson?step1Info.greyOutPerson:null }}</p>
                  <p>出库时间：{{ step1Info.greyOutTime?step1Info.greyOutTime:null }}</p>
                  <p>出库重量：{{ step1Info.greyOutWeight?step1Info.greyOutWeight:null }}</p>
                </template>
              </a-popover>
            </a-steps>
            <div class="vertical-box" :style="{backgroundColor:currentStep2==0?'#a4a4a4':'#6d9dd8'}"> </div>
          </div>

          <div class="step-box2">
            <a-steps type="dot" :current="currentStep2">
              <a-popover title="" position="bottom">
                <a-step class="green-step">调机确认</a-step>
                <template #content>
                  <p>确认人员：{{ step2Info.empVerifyName?step2Info.empVerifyName:null }}</p>
                  <p>调机单确认时间：{{ step2Info.empVerifyTime?step2Info.empVerifyTime:null }}</p>
                </template>
              </a-popover>
              <a-popover title="" position="bottom">
                <a-step class="green-step">调机派工</a-step>
                <template #content>
                  <p>派工人员：{{ step2Info.empDispatchName?step2Info.empDispatchName:null }}</p>
                  <p>调机派工时间：{{ step2Info.empDispatchTime?step2Info.empDispatchTime:null }}</p>
                  <p>调机人员：{{ step2Info.adjName?step2Info.adjName:null }}</p>
                </template>
              </a-popover>
              <a-popover title="" position="bottom">
                <a-step class="green-step">调机开始</a-step>
                <template #content>
                  <p>开始人员：{{ step2Info.empStartName?step2Info.empStartName:null }}</p>
                  <p>调机开始时间：{{ step2Info.empStartTime?step2Info.empStartTime:null }}</p>
                </template>
              </a-popover>
              <a-popover title="" position="bottom">
                <a-step class="green-step">查布头</a-step>
                <template #content>
                  <p>查布头人员：{{ step2Info.empFirstVerifyName?step2Info.empFirstVerifyName:null }}</p>
                  <p>查布头结果：{{ step2Info.inspectionState?step2Info.inspectionState:null }}</p>
                  <p>查布头时间：{{ step2Info.empFirstVerifyTime?step2Info.empFirstVerifyTime:null }}</p>
                </template>
              </a-popover>
              <a-popover title="" position="bottom">
                <a-step class="green-step">调机反馈</a-step>
                <template #content>
                  <p>调机反馈人员：{{ step2Info.empFeedBackName?step2Info.empFeedBackName:null }}</p>
                  <p>调机反馈时间：{{ step2Info.empFeedBackTime?step2Info.empFeedBackTime:null }}</p>
                </template>
              </a-popover>
              <a-popover title="" position="bottom">
                <a-step class="green-step">交机</a-step>
                <template #content>
                  <p>交机人员：{{ step2Info.empEndName?step2Info.empEndName:null }}</p>
                  <p>交机时间：{{ step2Info.empEndTime?step2Info.empEndTime:null }}</p>
                </template>
              </a-popover>
              <a-popover title="" position="bottom">
                <a-step class="green-step">工艺复核</a-step>
                <template #content>
                  <p>工艺复核人员：{{ step2Info.createName?step2Info.createName:null }}</p>
                  <p>工艺复核结果：{{ step2Info.infoState?step2Info.infoState:null }}</p>
                  <p>工艺复核时间：{{ step2Info.createTime?step2Info.createTime:null }}</p>
                </template>
              </a-popover>
            </a-steps>
          </div>
        </div>
      </a-spin>
    </template>
  </pageTabelLayout>
</template>

<script setup lang="ts">
  import { Search } from '@element-plus/icons-vue'
  import { ref, reactive, onMounted } from 'vue'
  import { Message} from "@arco-design/web-vue";
  import { tb1 } from './tableConfig/'
  import { post } from '@/api/http'
  const headerShow = ref<boolean>(true)
  const onLoading = ref<boolean>(false)
  const searchFormRef = ref<any>(null)
  const searchForm = reactive({
    firmId: '',
    planOrderCode: '',
    weavingCode: '',
    machineCode: '',
    firmOptions: [],
  })
  const searchFormRules = reactive({
    firmId: [{ required: true, message: '请选择公司', trigger: 'change' }],
  })
  const table1Ref = ref<any>(null)
  let configaggrid = ref({
    url: 'planSingle/planMachineTask/getPageInfo', //接口路径
    queryData: {
      firmId: searchForm.firmId,
      weavingCode: searchForm.weavingCode,
      planOrderCode: searchForm.planOrderCode,
      machineCode: searchForm.machineCode,
    },
    paginationShow: true, //分页是否显示
    invokeiIterface: true, //是否调用接
    rowMultiSelectWithClick: false, //点击行是否多选
    rowClickRequest: true, //点击行是否请求
    column: tb1,
    fileName: 'node-management-1',
  })
  // 获取公司下拉框
  const getFirmOptions = () => {
    post({
      url: 'org/baCompany/getTreeCompanyByUser',
      data: {},
    }).then((result: any) => {
      if (result.code === 200) {
        searchForm.firmOptions = result.data
      } else {
        Message.error(result.message)
      }
    })
  }
  onMounted(() => {
    getFirmOptions()
  })
  const selectHandler = () => {
    doRefresh()
  }
  const doRefresh = async () => {
    try {
      const valid = await searchFormRef.value.validate()
      if (valid) return
      currentStep1.value=0
      currentStep2.value=0
      step1Info={}
      step2Info={}
      onLoading.value = true
      table1Ref.value.setQuery({
        firmId: searchForm.firmId,
        weavingCode: searchForm.weavingCode,
        planOrderCode: searchForm.planOrderCode,
        machineCode: searchForm.machineCode,
      })
    } catch (e) {
      console.log(e)
    } finally {
      onLoading.value = false
    }
  }
  const currentStep1=ref(0)
  const currentStep2=ref(0)
  let step1Info=reactive<any>({})
  let step2Info=reactive<any>({})
  const getStepsData = async (rowEvent: any) => {
    try {
      onLoading.value = true
      const { data } = rowEvent
      const { weavingCode, planOrderCode, machineCode } = data
      const res = await post({
        url: 'planSingle/planMachineTask/getPmtProcessInfo',
        data: {
          weavingCode,
          planOrderCode,
          machineCode,
        },
      })
      if (res.code == 200) {
        currentStep1.value=res.data.state
        currentStep2.value=res.data.adjStateMap.adjState
        step1Info=res.data
        step2Info=res.data.adjStateMap
      } else {
        Message.error(res.message)
      }
    } catch (e) {
      console.log(e)
    } finally {
      onLoading.value = false
    }
  }
</script>

<style scoped lang="scss">
  .my-tool-bar {
    padding: 5px;
  }
  .step-container {
    position: relative;
    overflow: auto;
    height: 100%;
  }
  .step-box1 {
    width: 80%;
    height: 110px;
  }
  :deep(.step-box2) {
    width: 50%;
    padding-left: 548px;
  }
  .step-box1 {
    :deep(.arco-steps-mode-dot .arco-steps-item-finish.green-step .arco-steps-item-node) {
      position: relative;
      background-color: #00cc28;
      width: 25px;
      height: 20px;
    }
    :deep(.arco-steps-mode-dot .arco-steps-item-finish.blue-step .arco-steps-item-node) {
      position: relative;
      // background-color: #232de0;
      color: #00cc28;
      width: 25px;
      height: 20px;
    }
    :deep(.arco-steps-mode-dot .arco-steps-item-finish.green-step .arco-steps-item-title) {
      color: #00cc28;
    }
    :deep(.arco-steps-mode-dot .arco-steps-item-finish.blue-step .arco-steps-item-title) {
      // color: #232de0;
      color: #00cc28;
    }
  }
  .step-box2 {
    :deep(.arco-steps-mode-dot .arco-steps-item-finish.green-step .arco-steps-item-node) {
      position: relative;
      background-color: #00cc28;
      width: 25px;
      height: 20px;
      z-index: 3;
    }
    :deep(.arco-steps-mode-dot .arco-steps-item-finish.green-step .arco-steps-item-title) {
      color: #00cc28;
    }
  }
  :deep(.arco-steps-mode-dot.arco-steps-horizontal .arco-steps-item-node) {
    margin-left: 55px;
  }
  :deep(.arco-steps-mode-dot
      .arco-steps-item:not(:last-child).arco-steps-item-finish
      .arco-steps-item-tail) {
    background-color: #6d9dd8;
    height: 10px;
    border-radius: 10px;
  }
  :deep(.arco-steps-item:not(:last-child).arco-steps-item-finish .arco-steps-item-tail::after) {
    background-color: #6d9dd8;
  }
  :deep(.arco-steps-mode-dot .arco-steps-item-process.green-step .arco-steps-item-node) {
    z-index: 3;
    position: relative;
    width: 25px;
    // background-color: #00cc28;
    background-color: #232de0;
    height: 20px;
  }
  :deep(.arco-steps-mode-dot .arco-steps-item-process.blue-step .arco-steps-item-node) {
    z-index: 3;
    position: relative;
    width: 25px;
    background-color: #232de0;
    height: 20px;
  }
  :deep(.arco-steps-mode-dot .arco-steps-item-process.green-step .arco-steps-item-title) {
    z-index: 3;
    color: #232de0;
    font-weight: 700;
  }
  :deep(.arco-steps-mode-dot .arco-steps-item-process.blue-step .arco-steps-item-title) {
    z-index: 3;
    color: #232de0;
    font-weight: 700;
  }
  :deep(.arco-steps-mode-dot
      .arco-steps-item:not(:last-child).arco-steps-item-process
      .arco-steps-item-tail) {
    background-color: #a4a4a4;
    height: 10px;
    border-radius: 10px;
  }
  :deep(.arco-steps-item:not(:last-child) .arco-steps-item-tail::after) {
    background-color: #a4a4a4;
  }
  :deep(.arco-steps-mode-dot .arco-steps-item-wait .arco-steps-item-node) {
    position: relative;
    background-color: #a4a4a4;
    width: 25px;
    height: 20px;
  }
  :deep(.arco-steps-mode-dot .arco-steps-item:not(:last-child) .arco-steps-item-tail) {
    background-color: #a4a4a4;
    height: 10px;
  }
  :deep(.arco-steps-mode-dot .arco-steps-item-wait .arco-steps-item-title) {
    color: #000;
  }
  .vertical-box {
    width: 10px;
    height: 102px;
    margin-left: 610px;
    position: absolute;
    top: 13px;
    z-index: 2;
  }
</style>
